export default function (data, index) {
    // dynamicLoadCss("https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css")
    // dynamicLoadCss("/Direct/com.nebutown.workflow.root.Root/commonui/commoncss/layui.css")
    // dynamicLoadJs("/Direct/com.nebutown.workflow.root.Root/commonui/commonjs/layui.all.js")
    // dynamicLoadJs("https://unpkg.com/qiniu-js@2.5.4/dist/qiniu.min.js")
    window.nbasics.loadingCss("/Direct/com.nebutown.workflow.root.Root/commonui/commoncss/layui.css")
    window.nbasics.loadingJs("/Direct/com.nebutown.workflow.root.Root/commonui/commonjs/layui.all.js")

    let style = `
                <style>
                    .menuPathListUl{
                        width: 100%;
                    }
                    .sideBar{
                        width: 100%;
                        height: 100%;
                    }
                    .icons{
                        font-size: 20px; 
                        margin-right: 1px;
                        margin-left: 5px;
                        margin-top: 1px;
                    }
                    .titleWrap{
                      box-sizing: border-box;
                      padding-left: 15px;
                    }
                   .titleWrap a{
                        display: inline !important;
                        width: 70%;
                   }
                </style>
                `;
    if (!localStorage.getItem("menuOpenArrayList")) {
        let menuOpenArray = [];
        data.forEach(item => {
            menuOpenArray.push(true);
        });
        let menuOpenArrayList = JSON.stringify({key: menuOpenArray});
        localStorage.setItem("menuOpenArrayList", menuOpenArrayList);
    }

    let menuOpenArrayList = JSON.parse(localStorage.getItem("menuOpenArrayList")).key;
    let content = '';
    data.forEach((item, i) => {
        let dlList = '';
        item.list.forEach(item => {
            dlList += `<dd path="${item.path}"><a href="javascript:;" class="${index === item.itemName ? 'layui-this' : ''}">${item.displayName}</a></dd>`
        })
        content += `
                <li class="${menuOpenArrayList[i] ? "layui-nav-item layui-nav-itemed" : "layui-nav-item"}">
                    <a class="layui-nav-item-title" href="javascript:;">${item.groupName}</a>
                    <dl class="layui-nav-child" style="margin-bottom: 0">
                      ${dlList}
                    </dl>
                  </li>
                    `
    })
    let html = `
                <ul class="layui-nav layui-nav-tree layui-inline menuPathListUl" lay-filter="demo" style="height: 100%">
                  ${content}
                </ul>
             
                `;
    window.nbasics.differAction(() => {
        if (!localStorage.getItem("menuOpenArrayList")) {
            let menuOpenArray = [];
            data.forEach(item => {
                menuOpenArray.push(true);
            });
            let menuOpenArrayList = JSON.stringify({key: menuOpenArray});
            localStorage.setItem("menuOpenArrayList", menuOpenArrayList);
        }
        let menuOpenArray = JSON.parse(localStorage.getItem("menuOpenArrayList")).key;
        layui.use('element', function () {
            var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
            element.render('nav');
            element.on('nav(demo)', function (elem) {
                console.log(elem)
            });
        });
        let navTitle = document.querySelectorAll('.layui-nav-item-title');
        let sideBarli = document.querySelectorAll(".layui-nav-item");
        navTitle.forEach((item, i) => {
            var element = layui.element;
            item.onclick = function () {
                console.log(sideBarli[i].className)
                if (menuOpenArray[i]) {
                    sideBarli[i].className = "layui-nav-item";
                    menuOpenArray[i] = false
                } else {
                    sideBarli[i].className = "layui-nav-item  layui-nav-itemed";
                    menuOpenArray[i] = true
                }
                let menuOpenArrayList = JSON.stringify({key: menuOpenArray});
                localStorage.setItem("menuOpenArrayList", menuOpenArrayList);
                element.render('nav');
            }
        })
        let menuPathListUl = document.querySelector('.menuPathListUl');
        let menuPathListItem = menuPathListUl.querySelectorAll('dd');
        console.log(menuPathListItem)
        menuPathListItem.forEach((item, index) => {
            item.onclick = () => {
                console.log(item.getAttribute("path"))
                window.nbasics.touchBack({"path": item.getAttribute("path"), data: JSON.stringify({})})
            }
        })
    })
    return (`<div style="width: 100%;height: 100%;float: left;left: 0;border-right: 1px solid #ebebeb;overflow: hidden;">${style}${html}</div>`);
}